// vue狗日的
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 这个配置文件。起始就是一个js文件，通过node的模块操作，向外暴露一个对象
const path = require('path')
// 2：启用热跟新的第二步
const webpack = require('webpack')
// 导入在内存中生成html的插件
// 只要是插件，就一定要放在plugins节点中去
// 作用：
// 1：自动在内存中根据指定页面，生成一个内存页面
// 2：自动把打包好的bundle.js追加到页面中去，你也不用考虑bundle的路径问题
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {

    entry: './src/main.js',//入口文件
    output: { //出口文件相关配置
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    // 这是配置dev-sever命令参数的第二种方法
    devServer: {
        open: true,
        port: 3000,
        contentBase: 'src',
        // 启用热跟新的第一步
        hot: true
    },
    plugins: [//配置插件的节点
        // vue狗日的
        new VueLoaderPlugin(),
// 3:new一个热跟新的模块对象,
        new webpack.HotModuleReplacementPlugin(),
        new htmlWebpackPlugin({//创建一个在内存中生成html的插件,根据模板页面，生成指定的页面
            template: './src/index.html', //指定魔板页面
            filename: 'index.html' //指定生成页面的名称
        }),
    ],
    module: {//这个节点用来配置所有第三方文件的匹配和处理规则
        rules: [    // 处理第三方css模块,都是采用对象数组
            {
                // test:匹配到的后缀名   通过use处理，就是你的loader，从后往前
                test: /\.css$/, use: ['style-loader', 'css-loader']

            },
            {
                test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']
                // 配置处理.less文件的第三方loader规则
            },
            {
                test: /\.sass$/, use: ['style-loader', 'css-loader', 'sass-loader']
                // 配置处理.scss文件的第三方loader文件
            }, {
                test: /\.(jpg|png|gif|jpeg|bmp)$/, use: 'url-loader?limit=700&name=[name].[ext]'
            },
            {
                test: /\.(ttf|eot|svg|woff|woff2)/, use: 'url-loader'
            },
            {
                test: /\.js$/, use: 'babel-loader', exclude: /node_modules/
            },
            {
                test: /\.vue$/, use: 'vue-loader'
            }

        ]


    },
    resolve: {
        // alias:{
        // 设置vue被导入的包的路劲
        // "vue$":"vue/dist/vue.js"
        //}
    }

}